<template>
  <div style="padding: 0.208rem 0.208rem;font-size :14px;" @click="logings">
    <van-row>
      <van-col span="24" style="background-color:#fff8f2;padding : 0.25rem 0.25rem">
        <p style="font-size :14px;line-height:20px; color:#ce8f64">管理员{{123}}给你分配了一个客户还未添加,快去复制电话号码添加客户吧,管理员在后台可查看添加状态哦~</p>
      </van-col>
    </van-row>
    <!-- 筛选区域 -->
    <van-row style="margin-top:0.425rem">
      <van-col span="5" style="margin-top:6px">添加状态 :</van-col>
      <van-col span="15">
        <select class="select-box" @change="optionval($event)" v-model="selectval">
          <option v-for="(item,i) in selectlist" :key="i" :value="item.id">{{item.title}}</option>
        </select>
      </van-col>
      <van-col span="4">
        <button class="button-box" type="button" @click="reset">重置</button>
      </van-col>
    </van-row>
    <van-row>
      <!-- 间隔线 -->
      <van-col span="24" style="height:5px;background-color:#dee1e6;margin-top:0.425rem"></van-col>
    </van-row>
    <!-- 提示 -->
    <van-row>
      <van-col span="24"><span class="table-span"> 共{{1}}个客户</span></van-col>
    </van-row>
    <!-- 表格 -->

    <div class="box-big">
      <van-row class="row-box" style="">
        <van-col span="10" class="col-span">客户电话</van-col>
        <van-col span="8" class="col-span col-span-tow icon-box">
          添加状态
          <van-icon @click="loding = !loding" name="question-o" />
        </van-col>
        <van-col span="6" class="col-span">操作</van-col>
      </van-row>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-row class="row-box-info" style="" v-for="(item,i) in list" :key="i">
          <van-col span="10" class="col-span-info">{{item.id}}</van-col>
          <van-col span="8" class="col-span-info col-span-tow">{{item.name}}</van-col>
          <van-col span="6" class="col-span-info">
            <button class="van-list-btn" type="button" v-clipboard:copy="item.id" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</button>
          </van-col>
        </van-row>

      </van-list>
    </div>
    <div v-if="loding" class="icon-boxs">
      <p>待添加 : 成员未添加的客户
        <span @click="loding = false"><van-icon class="icon-box" name="cross" /></span>
      </p>
      <p>带通过 : 已发送申请,等待通过的客户</p>
      <p>已添加 : 添加成果的客户</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'customersAdd',
  data () {
    return {
      loding: false,
      selectval: 1,
      list: [
        { id: 15511860464, name: '法外狂徒张三' },
        { id: 15511860462, name: '法外狂徒李四' },
        { id: 15511860461, name: '法外狂徒王五' },
        { id: 15511860465, name: '法外狂徒马六' },
        { id: 15511860466, name: '法外狂徒大麻哈' }
      ],
      loading: false,
      finished: false, // 无线加载
      selectlist: [{ id: 1, title: "全部" }, { id: 2, title: "待添加" }, { id: 3, title: "待通过" }, { id: 4, title: "已添加" }],
    }
  },
  methods: {
    logings () {
      // this.loding = false
    },
    // 见提供
    optionval (e) {
      this.selectval = e.target.value
      console.log(this.selectval)
    },
    // 重置
    reset () {
      this.selectval = 1
    },
    // 列表加载
    onLoad () {
      console.log('列表加载')
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.list.length >= 20) {
          this.finished = true
        }
      }, 1000)
    },
    onCopy () {
      console.log('成功')
    },
    onError () {
      console.log('失败')

    }
  }
}
</script>

<style lang='css' scoped>
.select-box {
  height: 0.525rem !important;
  background-color: rgb(255, 255, 255);
  border: rgb(207, 211, 208) 1px solid;
  width: 2rem;
  height: 0.433rem;
  border-radius: 1px;
}
.button-box {
  width: 0.933rem;
  height: 0.525rem;
  background-color: #fff;
  border: rgb(207, 211, 208) 1px solid;
}
.table-span {
  margin-top: 0.333rem;
  display: inline-block;
  padding-left: 0.108rem;
  border-left: 0.097rem solid royalblue;
  font-weight: 700;
}
.van-cell {
  padding: 0;
}
.box-big {
  margin-top: 0.3rem;
  border: 1px solid #eee;
  border-bottom: none;
  padding: 1px;
}
.row-box {
  background-color: #effafc;
}

.col-span {
  height: 0.833rem;
  line-height: 0.833rem;
  text-align: center;
}
.col-span-info {
  height: 0.933rem;
  line-height: 0.933rem;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.col-span-tow {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.van-list-btn {
  height: 0.525rem;
  line-height: 0.25rem;
  background-color: #effafc;
  border: 1px solid #eee;
  color: #268ae8;
}
.icon-box {
  position: relative;
}
.icon-boxs {
  position: absolute;
  top: 4.708rem;
  left: 1.242rem;
  border: 1px solid #eee;
  width: 4.167rem;
  height: 1.467rem;
  background-color: rgb(255, 255, 254);
  line-height: 2;
  font-size: 9px;
  padding-left: 0.208rem;
  box-shadow: 0px 0px 5px rgb(133, 129, 129);
}
.icon-boxs .icon-box {
  margin-left: 0.867rem;
}
</style>